<template>
	<view class="content">
		<view class="index-title">
			<view class="title-content">
				精选
			</view>
			<u-icon @click="show=!show" name="list"></u-icon>
		</view>
		<view class="choose-image">
			<image :src="imageInfo.url" mode="aspectFill"></image>
		</view>
		<view class="info">
			<view class="art-name">
				{{imageInfo.englishName}}
			</view>
			<view class="art-title">
				{{imageInfo.chineseName}}
			</view>
		</view>
		<view class="choose-bottom">
			<view class="date">
				{{date}}
			</view>
			<u-line></u-line>
		</view>
		<view class="index-title">
			<view class="title-content">
				艺术家
			</view>
		</view>
		<scroll-view :scroll-x="true" :show-scrollbar='true' class="avatar-box">
			<view @click="gotoArtist(i.id)" v-for="i in artistList" class="avatar">
				<image @click="" :src="i.avatar" style="width: 66px;height: 66px;" mode="aspectFill"></image>
			</view>
		</scroll-view>
		<view class="index-title">
			<view class="title-content">
				作品集
			</view>
		</view>
		<view class="photo-box">
			<view @click="gotoSample" v-for="i in 3" class="photo-son">
				<view class="photo">
					<image src="../../static/photo.jpeg" mode="widthFix"></image>
				</view>
				<view class="article">
					Jeff Rayner
				</view>
				<view class="title">
					United States
				</view>
			</view>
		</view>
		<view class="index-title">
			<view class="title-content">
				摄影展
			</view>
		</view>
		<view style="margin-top: 10px;" v-for="i in 4">
			<view class="show-list">
				<view class="show-title">
					连州国际摄影展 2021.07.31
				</view>
				<view class="location">
					连州
				</view>
			</view>
			<u-line></u-line>
		</view>
		<u-popup v-model="show" mode="right" width="600rpx">
			<view class="right-bar">
				<u-search @search="search" :clearabled="false" :show-action="false" v-model="searchText" shape="round"></u-search>
				<view v-for="(i,index) in searchList" class="search-list">
					<view @click="gotoArtist(i.id)" style="margin-bottom: 5px;">
						{{i.chineseName}}
					</view>
					<u-line></u-line>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import API from '../../API/index.js'
	export default {
		data() {
			return {
				show: false,
				imageInfo: {},
				artistList: [],
				searchList: [],
				searchText:"",
				date:""
			}
		},
		async onLoad() {
			await this.getHeadData()
			await this.getImageInfo(this.imageInfo.author_id)
		},
		methods: {
			gotoArtist(id) {
				uni.navigateTo({
					url: '../artist/index?id=' + id
				})
			},
			gotoSample() {
				uni.navigateTo({
					url: "../sample/sample"
				})
			},
			getHeadData() {
				return new Promise((resolve) => {
					API.getHeadAll().then(res => {
						console.log(res)
						let list = res.data.data.list
						this.imageInfo = list.imageInfo[0]
						this.artistList = list.authorList
						this.date = list.date
						resolve()
					})
				})
			},
			getImageInfo(authorId) {
				let data = {
					"form": "author",
					"operation": "search",
					"data": {
						"id": authorId
					},
					"size": 1,
					"page": 1
				}
				return new Promise((resolve) => {
					API.operationForm(data).then(res => {
						console.log(res)
						this.imageInfo['chineseName'] = res.data.data.list[0].chineseName
						this.imageInfo['englishName'] = res.data.data.list[0].englishName
						this.$forceUpdate()
					})
				})
			},
			search() {
				let data = {
					"form": "author",
					"size": -1,
					"data": {
						"chineseName": this.searchText
					}
				}
				return new Promise((resolve) => {
					API.searchLike(data).then(res => {
						this.searchList = res.data.data.list
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.index-title {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 24px;
		font-weight: bold;
	}

	.choose-image {
		width: 100%;
		height: 220px;
		overflow: hidden;
		border-radius: 9px;
		margin: 20px 0;

		image {
			width: 100%;
		}
	}

	.info {
		text-align: center;
	}

	.art-name {
		font-size: 19px;
	}

	.art-title {
		font-size: 24px;
		font-weight: bold;
	}

	.choose-bottom {
		margin-top: 30px;
		margin-bottom: 20px;
	}

	.date {
		font-size: 11px;
		color: #a1a4a4;
		margin-bottom: 10px;
	}

	.avatar-box {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		white-space: nowrap;
		margin-top: 20px;
		margin-bottom: 20px;

		.avatar {
			width: 66px;
			height: 66px;
			border-radius: 33px;
			overflow: hidden;
			margin: 10px;
			display: inline-block;

			image {
				width: 100%;
			}
		}
	}

	.photo-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;

		.photo-son {
			text-align: center;
			font-size: 15px;
			margin-bottom: 10px;

			.article {
				margin-top: 10px;
			}

			.photo {
				width: 155px;
				height: 155px;
				border-radius: 9px;
				overflow: hidden;

			}
		}
	}

	.show-list {
		display: flex;
		justify-content: space-between;
		width: 670rpx;
		margin-bottom: 10px;
	}

	.right-bar {
		margin: 20px 10px;
	}

	.search-list {
		margin: 15px 0;
	}
</style>
